<table class="table table-hover" style="margin-top:5px;min-width:auto;">
    <thead>
    <tr style="background-color: #f5f5f5; text-align:center">
        <th>ID</th>
        <th>用户</th>
        <th>访问操作</th>
        <th>时间</th>
        <th>状态</th>
        <th>请求内容</th>
    </tr>
    </thead>
    <tbody id="userlog_table">
    {% for i in data_list %}
        <tr name="tbody">
            <td>{{ i.id }}</td>
            <td>{{ i.user }}</td>
            <td>{{ i.menu }}---{{ i.action }}</td>
            <td>{{ i.create_time|date:"Y-m-d H:m:i" }}</td>
            <td>
                {% if i.status == "SUCCESS" %}
                    <span class="label label-success">
                {% elif i.status == "DENY" %}
                    <span class="label label-warning">
                {% else %}
                    <span class="label label-danger">
                {% endif %}
                {{ i.status }}
                </span>
            </td>
            <td>
                <div style="max-width:120px;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;"
                     name="up-connect">{{ i.req_data }}</div>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>
<div class="text-right" style="margin-top:-30px;padding-right:9%">
    <ul class="pagination" id="pagination"></ul>
</div>
<script type="text/javascript" src="/static/mystyle/js/game.js"></script>

<script>

    //多选按钮，全选，全不选
    $("#ckb_head").click(function () {
        if ($(this).prop("checked")) {//全选
            $("input[name='ckb']").attr("checked", "true");
        } else {//全不选
            $("input[name='ckb']").removeAttr("checked");
        }
    });


    //前端分页
    var limit = 15; //每页显示数据条数
    var total = $('#userlog_table').find('tr').length;
    var allPage = total % limit > 0 ? parseInt(total / limit) + 1 : parseInt(total / limit);

    function doPage(n) {
        if (allPage > 1) {
            var prevPage = '', nextPage = '', pageHtml = '';

            if (n === 1) {
                prevPage = '<li class="disabled"><a href="javascript:;">上一页</a></li>';
                nextPage = '<li data-page="' + (n + 1) + '"><a href="javascript:;">下一页</a></li>';
            } else if (n === allPage) {
                prevPage = '<li data-page="' + (n - 1) + '"><a href="javascript:;">上一页</a></li>';
                nextPage = '<li class="disabled"><a href="javascript:;">下一页</a></li>';
            } else {
                prevPage = '<li data-page="' + (n - 1) + '"><a href="javascript:;">上一页</a></li>';
                nextPage = '<li data-page="' + (n + 1) + '"><a href="javascript:;">下一页</a></li>';
            }

            if (n <= 5) {
                for (var i = 1; i <= 5; i++) {
                    if (n === i) {
                        pageHtml += '<li class="active"><a href="javascript:;">' + i + '</a></li>';
                    } else {
                        if (i <= allPage) {
                            pageHtml += '<li data-page="' + i + '"><a href="javascript:;">' + i + '</a></li>';
                        }
                    }

                }
            } else {
                for (var i = 1; i <= 5; i++) {

                    cur_page = parseInt(parseInt((n - 1) / 5) * 5);

                    if (n === (cur_page + i)) {
                        pageHtml += '<li class="active"><a href="javascript:;">' + (cur_page + i) + '</a></li>';
                    } else {
                        if ((i + cur_page) <= allPage) {
                            pageHtml += '<li data-page="' + (i + cur_page) + '"><a href="javascript:;">' + (i + cur_page) + '</a></li>';
                        }
                    }

                }

            }

            $('#pagination').html(prevPage + pageHtml + nextPage);
        }

        $('#userlog_table').find('tr[name="tbody"]').hide();
        if (n === 1) {
            $('#userlog_table').find('tr[name="tbody"]:lt(' + limit + ')').show();
        } else {
            $('#userlog_table').find('tr[name="tbody"]:gt(' + ((n - 1) * limit - 1) + '):lt(' + limit + ')').show();
        }

    }

    doPage(1);

    $('#pagination').on('click', 'li a', function (event) {
        event.preventDefault();
        var curr = parseInt($(this).parent().data('page'));

        if (!isNaN(curr)) {
            doPage(curr);
        }
    });


</script>